<template>
  <div class="navbar" :class="{ 'navbar--fixed': fixed, 'navbar--transparent': transparent }">
    <div class="navbar__content">
      <!-- 左侧内容 -->
      <div class="navbar__left" @click="onClickLeft">
        <slot name="left">
          <van-icon v-if="leftArrow" name="arrow-left" class="navbar__arrow" />
          <span v-if="leftText" class="navbar__text">{{ leftText }}</span>
        </slot>
      </div>

      <!-- 标题内容 -->
      <div class="navbar__title">
        <slot name="title">
          <span class="navbar__title-text">{{ title }}</span>
        </slot>
      </div>

      <!-- 右侧内容 -->
      <div class="navbar__right" @click="onClickRight">
        <slot name="right">
          <span v-if="rightText" class="navbar__text">{{ rightText }}</span>
        </slot>
      </div>
    </div>

    <!-- 底部边框 -->
    <div v-if="border" class="navbar__border"></div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps({
  // 标题
  title: {
    type: String,
    default: ''
  },
  // 左侧文字
  leftText: {
    type: String,
    default: ''
  },
  // 右侧文字
  rightText: {
    type: String,
    default: ''
  },
  // 是否显示左侧箭头
  leftArrow: {
    type: Boolean,
    default: false
  },
  // 是否固定在顶部
  fixed: {
    type: Boolean,
    default: true
  },
  // 是否透明
  transparent: {
    type: Boolean,
    default: false
  },
  // 是否显示底部边框
  border: {
    type: Boolean,
    default: true
  },
  // 背景颜色
  backgroundColor: {
    type: String,
    default: '#fff'
  },
  // 文字颜色
  textColor: {
    type: String,
    default: '#323233'
  },
  // z-index
  zIndex: {
    type: [Number, String],
    default: 1
  }
})

const emit = defineEmits(['click-left', 'click-right'])

const router = useRouter()

// 样式计算
const navbarStyle = computed(() => {
  const style = {
    backgroundColor: props.transparent ? 'transparent' : props.backgroundColor,
    color: props.textColor,
    zIndex: props.zIndex
  }
  return style
})

// 点击左侧
const onClickLeft = () => {
  emit('click-left')
  // 默认行为：如果显示左箭头且没有自定义处理，则返回上一页
  if (props.leftArrow && !emit('click-left')) {
    router.back()
  }
}

// 点击右侧
const onClickRight = () => {
  emit('click-right')
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixins.scss';

.navbar {
  position: relative;
  display: flex;
  align-items: center;
  height: $navbar-height;
  background: $navbar-background;
  user-select: none;

  &--fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: $z-index-fixed;
  }

  &--transparent {
    background: transparent;
  }

  &__content {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    padding: 0 $spacing-base;
  }

  &__left,
  &__right {
    display: flex;
    align-items: center;
    min-width: 0;
    cursor: pointer;
    user-select: none;

    &:active {
      opacity: 0.7;
    }
  }

  &__left {
    margin-right: auto;
  }

  &__right {
    margin-left: auto;
  }

  &__title {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    font-weight: $font-weight-medium;
    text-align: center;
  }

  &__title-text {
    @include ellipsis(1);
    font-size: $font-size-lg;
    font-weight: $font-weight-medium;
    color: $navbar-text-color;
  }

  &__text {
    font-size: $font-size-base;
    color: $navbar-text-color;
  }

  &__arrow {
    font-size: $font-size-lg;
    color: $navbar-text-color;
    margin-right: $spacing-xs;
  }

  &__border {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: $navbar-border-color;
    transform: scaleY(0.5);
  }
}

// 安全区域适配
.navbar--fixed {
  @include safe-area-top(padding-top);
  
  .navbar__content {
    height: $navbar-height;
  }
}

// 深色模式适配
@include dark-mode {
  .navbar {
    background: #1f1f1f;
    
    &__title-text,
    &__text,
    &__arrow {
      color: #fff;
    }
    
    &__border {
      background: #333;
    }
  }
}
</style>